<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API</title>
</head>
<body>

<ul>
    <li>11</li>
    <li>22</li>
</ul>
<script>
    let ul=document.querySelector('ul');
    for(let n=3;n<10;n++)
    {
        let li=document.createElement('li');
        li.innerHTML=n+''+n;
        ul.appendChild(li);
    }
</script>


<!-- <div class="one">这是一个DIV！！！</div>
<script>
    let input=document.createElement('input');
    input.value='hello';
    let div=document.querySelector('.one');
    div.appendChild(input);
</script> -->



<!-- <div id="one" class="light" style="font-size: 20px; height: 500px;">这是一个 div, 点击之后字体放大</div>
<style>
    .light {
        /* 日间模式 */
        color: black;
        background-color: white;
    }

    .dark {
        /* 夜间模式 */
        color: white;
        background-color: black;
    }
</style>
    <script>
        let div = document.querySelector('#one');
        div.onclick = function() {
            // 点击 div 切换日间模式和夜间模式
            if (div.className == 'dark') {
                div.className = 'light';
            } else {
                div.className = 'dark';
            }
        }
    </script> -->




<!-- <div style="font-size: 20px;">这是一个DIV,点击放大</div>
<script>
let div=document.querySelector('div');
div.onclick=function()
{
    let fontSize=parseInt (div.style.fontSize);
    fontSize=fontSize+10;
    div.style.fontSize=fontSize+'px';

}
</script> -->



<!-- <input type="text">
<button  > 点我一下</button>
<script>
    let input=document.querySelector('input');
    let button=document.querySelector('button');
    button.onclick=function(){

        if(input.type=='text')
        {
            input.type='password';
            button.innerHTML='显示密码';
                }        
        else
        {
            input.type='text';
            button.innerHTML='隐藏密码';
        }

    //     console.log(input.value);


    // let value= parseInt(input.value);
    // value=value+1;
    // input.value=value;
    }
</script> -->

    <!-- <div class="box">aaa</div>
    <div id="id"> 123</div>
    <h3>
        <span>
            <input type="text">
        </span>
    </h3>
    <script>
        let div=document.querySelector('.box');
        div.onclick =function(){
           // alert('hello');
            console.log(div.innerHTML);
            div.innerHTML+='a';
        }

        // var elem1 = document.querySelector('.box');
        // console.log(elem1);
        // var elem2 = document.querySelector('#id');
        // console.log(elem2);
        // var elem3 = document.querySelector('h3>span>input');
        // console.log(elem3);
       </script> -->
</body>
</html>